<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
      <div class="arrow-down-img" :class="{'arrow-up-img': showDropDown}"/>
    </div>
    <div class="drop-down-wrapper-double" ref="doubleDown" v-show="showDropDown">
      <ul class="ul-filter-list-wrapper">
        <li class="choose-all" v-if="type != 'singleEntityType'">
          <div class="double-filter-object-all">
            <check-box :checkDataItem="firstItem" @checkListener="checkListener" ref="totalCheckBox"
                       :checked="checkedF"
                       :pageChange="pageChange"
                       :isParent="true"
                       :isBelongToParentWhich="0"
                       :onlyCode="getOnlyCode()" :isParentLinkChild="isParentLinkChild"></check-box>
          </div>
        </li>
        <li v-if="type == 'singleEntityType'" v-for="(item,index) in dataList">
          <div class="double-filter-object horizontal-flex">
            <check-box @checkListener="checkListener"
                       :pageChange="pageChange"
                       :checkDataItem="item" :singleEntityChecked="index+1"></check-box>
          </div>
        </li>
        <li v-for="(item,index) in dataList" v-if="index>0">
          <div class="double-filter-object horizontal-flex" v-if="isPlanArea">
            <check-box @checkListener="checkListener" :checkDataItem="item"
                       :pageChange="pageChange"
                       :singlePlaneArea="index"
                       :isParent="false"
                       :checked="checkedF"
                       :isBelongToParentWhich="0"
                       :onlyCode="getOnlyCode()" :isParentLinkChild="isParentLinkChild"></check-box>
          </div>
        </li>
        <li v-for="(item,index) in dataList" v-if="index>0">
          <div class="double-filter-object horizontal-flex" v-if="isFreeType">
            <check-box @checkListener="checkListener" :checkDataItem="item"
                       :isParent="false"
                       :checked="checkedF"
                       :isBelongToParentWhich="0"
                       :onlyCode="getOnlyCode()" :isParentLinkChild="isParentLinkChild"></check-box>
          </div>
        </li>
        <li v-for="(item,index) in dataList" v-if="index>0">
          <div class="double-filter-object horizontal-flex" v-if="service">
            <check-box @checkListener="checkListener" :checkDataItem="item"
                       :pageChange="pageChange"
                       :singlePlaneArea="index"
                       :isParent="false"
                       :checked="checkedF"
                       :isBelongToParentWhich="0"
                       :onlyCode="getOnlyCode()" :isParentLinkChild="isParentLinkChild"></check-box>
          </div>
        </li>
      </ul>
      <div class="divider-line-filter"></div>
      <div class="confirm-btm-wrapper">
        <p class="double-confirm-btn" @click.stop="clickConfirm()">确定</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CheckBox from './check-box/check-box.vue'
  import {bus} from './js/bus.js';
  const TAG = 'doubleCheckFilter'

  export default {
    components: {
      CheckBox
    },
    props: {
      isParentLinkChild: {
        // 一级标题是否与二级标题联动
        type: Boolean,
        default() {
          return false
        }
      },
      maxSelectNum: {
        // 选择的最大数量是多少
        type: Number,
        default() {
          return 3000
        }
      },
      doubleListData: {
        type: Array,
        default() {
          return []
        }
      },
      defaultText: {
        type: String,
        default() {
          return '医疗类别'
        }
      },
      filter: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: null
      },
      pageChange: {
        type: Number,
        default: null
      }
    },
    created() {
      bus.$on('pageChange', () => {
        console.log('pageChange......uid===' + this._uid)
        this.showDropDown = false;
        this.clickConfirmBtn = false
        this.loadFilterData()
        setTimeout(() => {
          this.clickConfirm()
        }, 100)
      })
      bus.$on('filterIsShowing', (uid) => {
        if (this.showDropDown && uid == this.$parent._uid) {
          this.loadFilterData()
        }
      })
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
          if (this.showDropDown) {
            this.loadFilterData();
          }
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        firstItem: {},
        dataList: [],
        isTotal: false,
        cancelTotal: 'false',
        checkedF: this.type == 'planArea' ? false : this.type == 'freeType' ? true : null,
        isPlanArea: this.type == 'planArea' ? true : false,
        isFreeType: this.type == 'freeType' ? true : false,
        service: this.type == 'service' ? true : false
      }
    },
    methods: {
      loadFilterData() {
        if (this.clickConfirmBtn) {
          this.dataList = []
          setTimeout(() => {
//                console.log('this.lastConfirmDataList==' + JSON.stringify(this.lastConfirmDataList))
            this.dataList = JSON.parse(JSON.stringify(this.lastConfirmDataList));
            this.firstItem = JSON.parse(JSON.stringify(this.lastFirstItem))
            if (this.$refs.totalCheckBox) {
              this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
            }
//                console.log('this.dataList==' + JSON.stringify(this.dataList))
          }, 10)
        } else {
//              console.log('this.defaultDataList==' + JSON.stringify(this.defaultDataList))
          this.dataList = []
          setTimeout(() => {
            this.dataList = JSON.parse(JSON.stringify(this.defaultDataList));
            this.firstItem = JSON.parse(JSON.stringify(this.defaultFirstItem))
            if (this.$refs.totalCheckBox) {
              this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
            }
          }, 10)
        }
      },
      getOnlyCode(){
        return this._uid
      },
      checkListener(self, isChecked){
//        this.isTotal = false;
//        if (this.$refs.totalCheckBox) {
//          this.$refs.totalCheckBox.setChecked(false);
//        }
        if (this.isParentLinkChild) {
//          console.log('length:' + this.dataList.length)
//          console.log('当前所属子元素个数：' + this.getChildrenLengthByIndex(self.isBelongToParentWhich))
          if (this.dataList.length - 1 === this.getChildrenLengthByIndex(self.isBelongToParentWhich)) {
            this.$refs.totalCheckBox.setChecked(true)
          } else {
            this.$refs.totalCheckBox.setChecked(false)
          }
        } else {
          let chooseList = this.getSelectItemList();
          console.log('当前选择的checkbox数量为：' + chooseList.length)
          if (chooseList.length > this.maxSelectNum) {
            self.setChecked(false)
          }
        }
      },
      getChildrenLengthByIndex(index) {
        // 获取二级标题选择的个数
        let chooseList = [];
        this.dataList.forEach((item, index) => {
          // index为0时，为全部按钮，不包含在二级标题内
          if (index !== 0) {
            if (item.checked) {
              chooseList.push(item.selectId)
            }
          }
        });
        return chooseList.length
      },
      getSelectItemList() {
        let chooseList = [];
        this.dataList.forEach((item) => {
          if (item.checked) {
            chooseList.push(item.selectId)
          }
          if (item.child) {
            item.child.forEach((item1) => {
              if (item1.checked) {
                chooseList.push(item1.selectId)
              }
            })
          }
        });
        return chooseList
      },
      chooseSingle(){
//        return
//        this.cancelTotal = 'true';
      },
      chooseTotal(isChecked){
        //选择全部
//        this.isTotal = isChecked;
      },
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.name
        this.currentSelectPosition = index
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      clickConfirm() {
        let chooseList = [];
        let chooseListName = []
        let mes = ''
        if (this.type == 'freeType') {
          mes = '费用类型不能为空';
        } else if (this.type == 'planArea') {
          mes = '统筹区域不能为空';
        } else if (this.type == 'singleEntityType') {
          mes = '单病种类型不能为空';
        }else if (this.type == 'service') {
          mes = '就业服务类型不能为空';
        }
        this.dataList.map((item, index) => {
          if (item.checked && item.selectId && item.selectId.length > 0) {
            chooseList.push(item.selectId)
            chooseListName.push(item.selectName)
          }
        })
        // console.log(originData)
        if (chooseList.length == 0) {
          this.$message({
            message: mes,
            center: true,
            type: 'info',
          });
        } else {
          // 点击了确定标识
          this.clickConfirmBtn = true
          this.lastConfirmDataList = JSON.parse(JSON.stringify(this.dataList))
          this.lastFirstItem = JSON.parse(JSON.stringify(this.firstItem))

          this.$emit('confirmDoubleSelect', chooseList, chooseListName);
          this.showDropDown = false;
        }
      },
      clickBlank() {
      },
      getDataFromFilter() {
        if (this.type == 'freeType') {
          this.dataList = this.filter.nc.freeType;
          this.firstItem = this.dataList[0]
          // 费用类别全部都置为选择
          this.dataList.forEach((item, index) => {
            item.checked = true
          })
        } else if (this.type == 'planArea') {
          this.dataList = this.filter.nc.planArea;
          this.firstItem = this.dataList[0]
          // 统筹区是前六个置为选择状态
          this.dataList.forEach((item, index) => {
            if (index > 0 && index < 7) {
              item.checked = true
            } else {
              item.checked = false
            }
          })
        } else if (this.type == 'singleEntityType') {
          this.dataList = this.filter.nc.singleEntityType;
          this.firstItem = [];
          // 典型单病种是前5个置为选择状态
          this.dataList.forEach((item, index) => {
            if (index < 5) {
              item.checked = true
            } else {
              item.checked = false
            }
          })
        }else if(this.type=="service"){
          this.dataList=this.filter.service;
          console.log(this.filter.service)
          this.firstItem = this.dataList[0];
        }

        // 默认值
        this.defaultFirstItem = JSON.parse(JSON.stringify(this.firstItem))
        this.defaultDataList = JSON.parse(JSON.stringify(this.dataList))
//        console.log('this.defaultDataList==' + JSON.stringify(this.defaultDataList))
      },

      // 重置
      reset(){
        this.dataList.forEach((item, index) => {
          // index为0时，为全部按钮，不包含在二级标题内
           item.checked=true;
        });
        this.$refs.totalCheckBox.setChecked(true);
        this.clickConfirm();
      }
    },
    planAreaSelect(){
      this.clickConfirm()
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false;
      });
      /*console.log('444444444===' + this.filter)*/
      if (this.filter) {
        this.getDataFromFilter()
      }
    },
    watch: {
      filter(val) {
        // console.log('double-check-filter  filter发生变化')
        if (val) {
          this.getDataFromFilter()
        }
      },
     pageChange(){
       // console.log('pageChange......uid===' + this._uid)
       this.showDropDown = false;
       this.clickConfirmBtn = false
       this.loadFilterData()
     },
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

  /* .ul-filter-list-wrapper li{
     min-width:49%;
   }*/
  .ul-filter-list-wrapper .choose-all {
    width: 100%;
  }
</style>
